<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="chatbox">
        <header>
            <a href="./info.html">杨幂</a>
        </header>
        <div id="content" class="content">
            <div class="chatBox">
                <!-- 聊天内容 -->
            </div>
        </div>
        <div class="sendMessage">
            <textarea name="" id="textarea"></textarea>
            <span id="sendbtn">发 送</span>
        </div>
    </div>
</body>
<script>
    let contentBox = document.querySelector('#content')
    let chatBox = document.querySelector('.chatBox')
    let textarea = document.querySelector('#textarea')
    let sendbtn = document.querySelector('#sendbtn')
    const chatTools = { // 聊天窗口
        send() {
            let value = textarea.value
            if (!value.trim()) {
                return
            }
            textarea.value = ''

            //发送 
            let message = {
                type: 0,
                data: {
                    message: value
                }
            }
            webSocketTools.send(message)
            chatTools.addMessage(value, 'me', 'xxbb')
            setTimeout(function () {
                contentBox.scrollTo(0, chatBox.clientHeight - contentBox.clientHeight + 30)
            }, 0)
        },
        addMessage(value, className, imgName) {
            let div = document.createElement('div')
            div.className = className
            let p = document.createElement('p')
            p.innerText = value
            let img = new Image()
            img.src = `./imgs/${imgName}.png`
            img.onload = function () {
                div.append(img)
                div.append(p)
                chatBox.append(div)
            }
        },
        receive(val) {
            let value = val
            if (!value.trim()) {
                return
            }
            textarea.value = ''
            chatTools.addMessage(value, 'opposite', 'ym')
            setTimeout(function () {
                contentBox.scrollTo(0, chatBox.clientHeight - contentBox.clientHeight + 30)
            }, 0)
        }
    }

    const webSocketTools = { //websocket相关
        open() {
            ws.onopen = function (params) {
                console.log('客户端连接成功')
                // 向服务器发送消息
                webSocketTools.heartBreak() //开始心跳
            }
        },
        send(val) {
            let message = JSON.stringify(val)
            ws.send(message)
        },
        receive() {
            ws.onmessage = function (res) {
                let data = JSON.parse(res.data)
                switch (data.type) {
                    case 0:
                        if(data.data.message === 'peng'){
                            console.log('心跳')
                        }
                        else{
                            chatTools.receive(data.data.message)
                        }
                        break
                    //判断type做后续操作
                }
            }
        },
        heartBreak() { //心跳
            timer = setInterval(() => {
                let value = {
                    type: 0,
                    data: {
                        message: 'peng'
                    }
                }
                webSocketTools.send(value)
            }, 3000);
        },
        error() {
            ws.onerror = function (data) {
                console.log(data);
                clearInterval(timer)
            }
        },
        close() {
            ws.onclose = function (data) {
                console.log(data)
                clearInterval(timer)
            }
        }
    }
    //websocket
    let ws = new WebSocket('ws://192.168.1.150:81/webSocket/chaoba')
    let timer = null
    webSocketTools.open()
    webSocketTools.error()
    webSocketTools.close()
    webSocketTools.receive()
    sendbtn.addEventListener('click', chatTools.send)
    window.addEventListener('keyup', function (e) {
        if (e.keyCode === 13) {
            chatTools.send()
        }
    })
</script>

</html>